<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
<style>
    .btn-gray{
        background-color: dimgray;
        color: #f0f8ff;
    }
</style>
<div id="tab">
<nav class="navbar navbar-default" style="height: 100%;margin: 0px">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand">学生选课管理</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/toCourse">课程管理</a></li>
                <li><a href="/login">学生管理</a></li>
                <li><a href="/toChoice">选课管理</a></li>
                <li><a href="/toDetail">选课明细表</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
    <div class="panel-heading">
        <div class="col-sm-2" id="so">
            <div class="input-group">
                <input type="text" placeholder="输入学号/姓名" class="form-control" id="value"/>
                <span class="input-group-addon"><a @click="queryStudent(1)"><i class="glyphicon glyphicon-search"></i></a></span>
            </div>
            <br>
        </div>
    </div>
    <div>
        <!-- Table -->
        <table class="table">
            <tr class="bg-primary">
                <th></th>
                <th>学号</th>
                <th>姓名</th>
                <th>专业</th>
                <th>入学时间</th>
                <th>备注</th>
                <th></th>
            </tr>
            <tr v-for="list in ShowIndexList">
                <td><input type="checkbox" name="del" :value="list.id" style="visibility: hidden"></td>
                <td>{{list.id}}</td>
                <td>{{list.name}}</td>
                <td>{{list.major}}</td>
                <td>{{list.entertime}}</td>
                <td>{{list.remark}}</td>
                <td style="text-align: right">
                    <button type="button" class="btn btn-info glyphicon glyphicon-tag" data-toggle="modal" data-target="#UpdateModal" name="upddlt" @click="OnUpdateStudent(list.id)"> 修改</button>
                    <button type="button" class="btn btn-danger glyphicon glyphicon-minus-sign" data-toggle="modal" data-target="#DeleteModel" name="upddlt" @click="OnDeleteStudent(list.id)"> 删除</button>
                </td>
            </tr>
        </table>
    </div>
    <!-- 底部 -->
    <div class="navbar navbar-default navbar-fixed-bottom" style="height: 50px">
        <div class="container" align="center" style="margin-top: -13px" >
            <ul class="pagination" >
                <li>
                    <a aria-label="Previous" @click="firstPage()">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a aria-label="Previous" @click="sPage()">
                        <span aria-hidden="true">&#139;</span>
                    </a>
                </li>
                <li class="active"><a>{{cols}}<span class="sr-only">(current)</span></a></li>
                <li>
                    <a aria-label="Next" @click="xPage()">
                        <span aria-hidden="true">&#155;</span>
                    </a>
                </li>
                <li>
                    <a aria-label="Next" @click="lastPage()">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </div>
        <div style="float: right;margin-top: -60px;margin-right: 5px">
            <div style="text-align: right">
                <button type="button" class="btn btn-gray glyphicon glyphicon-plus-sign" data-toggle="modal" data-target="#InsertModal"> 增加</button>
                <button type="button" class="btn btn-gray " style="display: none" id="affirm" @click="OnCheckDeleteStudent()" data-toggle="modal"> 删除确认</button>
                <button type="button" class="btn btn-gray glyphicon glyphicon-minus-sign" style="display: none" id="cancel" @click="HideBut()"> 删除取消</button>
                <button type="button" class="btn btn-gray glyphicon glyphicon-minus-sign" @click="ShowBut()" id="dlt"> 删除</button>
            </div>
        </div>
    </div>
    <!--  新增模态框  -->
    <div class="modal fade" id="InsertModal">
        <div class="modal-dialog" style="width: 800px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">新增学生信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" method="get" action="http://localhost:3000/insert">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">专业：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="major" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">入学时间：</label>
                            <div class="col-sm-10">
                                <input type="date" class="form-control" name="entertime" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注：</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" name="remark"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">确认增加</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!--  修改模态框  -->
    <div class="modal fade" id="UpdateModal">
        <div class="modal-dialog" style="width: 800px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改学生信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" method="get" action="http://localhost:3000/update">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">学号：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="One.id" disabled="disabled" required>
                                <input type="hidden" class="form-control" v-model="One.id" name="id">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="One.name" name="name" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">专业：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="One.major" name="major" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">入学时间：</label>
                            <div class="col-sm-10">
                                <input type="date" class="form-control" v-model="One.entertime" name="entertime" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注：</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" v-model="One.remark" name="remark"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">确认修改</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- 确认删除模态框 -->
    <div class="modal fade" id="DeleteModel">
        <div class="modal-dialog" style="width: 300px;height: 200px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" style="font-weight: bold">删除确认</h4>
                </div>
                <div class="modal-body">
                    <p>确认删除该信息吗?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="DeleteStudent()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
</body>
<script>
    /*import Vue from "vue";
    import axios from "axios";
    Vue.prototype.$axios = axios;*/
    let app = new Vue({
        el:"#tab",
        data:{
            ShowIndexList:[],//表格数据
            stuId:[],//删除所需id

            count:"",//数据总行数
            cols: 1,//当前页数，默认为1
            limit: 10,//每页行数
            maxcols: 0,//最大总页数
            checkStatus: true,//记录复选框的显示状态，true 为隐藏，false 为显示

            One:""//查询单条数据
        },
        methods:{

            //回调函数调用的方法，从后台获取数据，渲染页面
            ShowIndex: function () {
                axios.post('http://localhost:3000/show',{
                    data:{
                        limit:this.limit
                    }
                }).then(response => {
                    this.ShowIndexList = response.data.list;
                    this.count = response.data.count;
                })
            },
            //弹出修改模态框所需查询数据
            OnUpdateStudent: function (id) {
                axios.get('http://localhost:3000/findById',{
                    params:{
                        id
                    }
                }).then(response=>{
                    this.One = response.data.one;
                    console.log(this.One)
                })
            },
            //模糊查询，分页查询
            queryStudent: function (status){
                //如果点击的是搜索，要重新给cols赋值
                if (status == 1){
                    this.cols = 1;
                }
                let variable = this.checkStatus;
                let val = $('#value').val();
                axios.post('http://localhost:3000/query',{
                     data:{
                         val,
                         cols:this.cols,
                         limit:this.limit
                    }
                }).then(response=>{
                    this.ShowIndexList = response.data.list;
                    this.count = response.data.count;
                    //点击搜索/下一页时改变复选框的选中状态为未选中，并根据checkStatus所记录的复选框显示状态来判断是否显示复选框
                    //该方法让里的函数延迟到下次DOM更新循环之后执行，这样数据就是更新后的数据了
                    this.$nextTick(function () {
                        $("input[name='del']").each(function (j,item) {
                            item.checked = false;
                            if (variable == false){
                                item.style.visibility = "visible";
                                //禁用按钮
                                $("button[name='upddlt']").each(function (j,item) {
                                    item.disabled = "disabled";
                                })
                            }else{
                                item.style.visibility = "hidden";
                                //复用按钮
                                $("button[name='upddlt']").each(function (j,item) {
                                    item.disabled = "";
                                })
                            }
                        })
                    })
                    console.log('ck',$("input[name='del']").length)
                })
            },
            //第一页
            firstPage: function (){
                if (this.cols != 1)
                    this.cols = 1;
                this.queryStudent();
            },
            //上一页
            sPage: function(){
                if (this.cols != 1)
                    this.cols--;
                this.queryStudent();
            },
            //下一页
            xPage: function(){
                if (this.cols*this.limit<this.count)
                    this.cols++;
                this.queryStudent();
            },
            //最后一页
            lastPage: function () {
                //计算最大总页数
                if (this.count%this.limit == 0)
                    this.maxcols = parseInt(this.count/this.limit);
                else
                    this.maxcols = parseInt(this.count/this.limit+1);
                if (this.cols != this.maxcols){
                    this.cols = this.maxcols;
                    this.queryStudent();
                }
            },
            //删除：把id放都data中
            OnDeleteStudent:function (id) {
                //先把数组里之前所选择过的id清空
                this.stuId = [];
                this.stuId.push(id);
            },
            //复选删除
            OnCheckDeleteStudent:function () {
                //先把数组里之前所选择过的id清空
                this.stuId = [];
                //由于this.stuId放在循环中，指向有问题，所以我在外边取出来用变量保存
                let stuIdlist = this.stuId;
                $("input[name='del']").each(function (j,item) {
                    //遍历复选框，如果复选框选中，则把该复选框的值（该学生的id）添加到stuId数组中
                    if (item.checked == true){
                        stuIdlist.push($(this).attr('value'))
                    }
                });
                //如果没有选中项，则提示，并且不弹出模态框
                if (this.stuId.length < 1){
                    alert("请选择要删除的学生!")
                    return
                }
                //否则弹出模态框
                $("#DeleteModel").modal('show');
            },
            //显示复选框与删除按钮
            ShowBut:function (){
                $('#dlt').toggle(false);
                $('#affirm').toggle(true);
                $('#cancel').toggle(true);
                $("input[name='del']").each(function (j,item) {
                    item.style.visibility = "visible";
                })
                //把单个修改与删除改未disabled
                $("button[name='upddlt']").each(function (j,item) {
                    item.disabled = "disabled";
                })
                this.checkStatus = false;
            },
            //隐藏复选框与删除按钮
            HideBut:function () {
                $('#dlt').toggle(true);
                $('#affirm').toggle(false);
                $('#cancel').toggle(false);
                $("input[name='del']").each(function (j,item) {
                    item.checked = false;
                    item.style.visibility = "hidden";
                })
                //把单个修改与删除改disabled属性去掉
                $("button[name='upddlt']").each(function (j,item) {
                    item.disabled = "";
                })
                this.checkStatus = true;
            },
            //提交删除
            DeleteStudent: function () {
                axios.post('http://localhost:3000/delete',{
                    data:{
                        id:this.stuId
                    }
                }).then(response=>{
                    //返回页面后隐藏确认删除模态框
                    $('#DeleteModel').modal('hide');
                    //删除后刷新页面数据
                    this.queryStudent();
                })
            }
        },
        //钩子函数
        created() {
            this.ShowIndex();
        }
    })
</script>
</html>